<template>
  <el-card class="box-card" style="height: 99%">
    <template #header>
      <div class="card-header">
        <span>欢迎你，同志</span>
<!--        <el-button class="button" type="text">Operation button</el-button>-->
      </div>
    </template>
    <div style="width: 600px;">
      <el-form ref="formRef" :model="form" label-width="120px">
        <el-form-item label="用户名">
          <el-input :placeholder="form.username" v-model="form.username"></el-input>
        </el-form-item>
        <el-form-item label="密码">
          <el-input v-model="form.password"></el-input>
        </el-form-item>
        <el-form-item label="手机号">
          <el-input v-model="form.phonenumber"></el-input>
        </el-form-item>
        <el-form-item label="邮箱">
          <el-input v-model="form.email"></el-input>
        </el-form-item>
        <el-form-item  label="头像">
          <el-tooltip
              class="box-item"
              effect="dark"
              content="点击头像更换"
              placement="right"
          >
            <el-upload
                class="avatar-uploader"
                :action="uploadurl"
                :show-file-list="false"
                :on-success="handleAvatarSuccess"
                :before-upload="beforeAvatarUpload">
              <img v-if="imageUrl" :src="imageUrl" class="avatar">
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </el-tooltip>
        </el-form-item>
        <el-form-item label="个人简介">
          <el-input v-model="form.description" type="textarea"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="update">保存</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="logOut">登出</el-button>
        </el-form-item>
      </el-form>
    </div>
  </el-card>
</template>

<script>
import { getToken, setToken, removeToken, getTokenHead ,setTokenHead, getRefreshToekn, setRefreshToekn} from "@/utils/auth"
import router from "@/router";
import request from "@/utils/request";
import {getUserInfo, setFullUserInfo, setUserInfo} from "@/utils/owninfo";

export default {
  name: "OwnCenter",
  data(){
    return {
      form:{
        username:'',
        password:'',
        phonenumber:'',
        email:'',
        headshot:'',
        description:'',
      },
      userInfo:null,
      imageUrl: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
      uploadurl:'',
    }
  },
  created() {
    this.validateLogin()
  },
  methods: {
    load(){
      request({
        url: '/user/getusersbyids',
        method: 'get',
        params:{
          ids:getUserInfo()
        }
      }).then(response => {
        console.info(response.data.users[0])
        this.userInfo = response.data.users[0]
        console.log(this.userInfo)
        this.form.username = this.userInfo.username
        this.form.phonenumber = this.userInfo.phonenumber
        this.form.email = this.userInfo.email
        this.form.description = this.userInfo.description
        this.uploadurl = '/api/file/updateheadshot?userid='+this.userInfo.userid
        this.getHeadShot()
      }).catch(error => {
        console.info(error)
        this.$message.error("请重新登录")
      })
    },
    update(){
      request({
        url: '/user/update',
        method: 'get',
        params:{
          userid:getUserInfo(),
          username: this.form.username,
          password: this.form.password,
          email: this.form.email,
          phonenumber: this.form.phonenumber,
          description: this.form.description,
        }
      }).then(response => {
        console.info(response)
      }).catch(error => {
        console.info(error)
      })
    },
    getHeadShot(){
      request({
        url: '/file/getheadshot',
        method: 'get',
        params:{
          fileid: this.userInfo.headshotid
        }
      }).then(response => {
        console.info(response)
        this.imageUrl = 'http://124.222.162.206:8160/file/preview/'+response
      }).catch(error => {
        console.info(error)
      })
    },
    validateLogin() {
      console.info("验证登录")
      console.info(getToken())
      if(getToken() === null || getToken() === undefined || getToken() === "undefined"){
        console.info('去登陆')
        router.push("/login");
        return ;
      }
      console.log("已登陆")
      this.load()
    },
    logOut(){
      console.log("登出")
      setTokenHead(undefined)
      setToken(undefined)
      setRefreshToekn(undefined)
      setUserInfo(undefined)
      setFullUserInfo(undefined)
      this.validateLogin()
    },
    handleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw);
    },
    beforeAvatarUpload(file) {
      const isLt2M = file.size / 1024 / 1024 < 10;

      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 10MB!');
      }
      return isLt2M;
    }
  }
}
</script>

<style scoped>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}

.box-item {
  width: 110px;
  margin-top: 10px;
}
</style>
